import React, { PureComponent, lazy, Suspense } from 'react'
import { Route, Switch, Redirect } from 'react-router-dom'
import { connect } from 'react-redux'
import Loading from '@/components/Loading'
import Main from '@/views/Main'
import Header from '@/components/Header'
import GoTop from '@/components/GoTop'
import ErrorDefault from '@/components/ErrorDefault'
const Video = lazy(() => import('@/views/Video'))
const Bangumi = lazy(() => import('@/views/Bangumi'))
const NotFound = lazy(() => import('@/views/NotFound'))
const Search = lazy(() => import('@/views/Search'))
const TagPage = lazy(() => import('@/views/TagPage'))
const Rank = lazy(() => import('@/views/Rank'))
const Space = lazy(() => import('@/views/Space'))
const Topic = lazy(() => import('@/views/Topic'))
const Article = lazy(() => import('@/views/Article'))
const Vote = lazy(() => import('@/views/Vote'))
const Lottery = lazy(() => import('@/views/Lottery'))
class App extends PureComponent {

  render() {
    const { pageError } = this.props
    return (
      <> 
        <Header />
        {
          pageError ? 
            <ErrorDefault /> :       
            <Suspense fallback={<Loading/>}>
              <Switch>               
                <Route exact path="/" component={Main} />
                <Route path="/channel/:id/:childId?" component={Main} />          
                <Route path="/video/:bvid" component={Video} />
                <Route path="/bangumi/:id" component={Bangumi} />   
                <Route path="/space/:id" component={Space} />       
                <Route path="/tag/:id" component={TagPage} />                  
                <Route path="/rank/:id?" component={Rank} />  
                <Route path="/topic/:title" component={Topic} />  
                <Route path="/article/:id" component={Article} />
                <Route path="/vote/:id" component={Vote} />  
                <Route path="/lottery/:id" component={Lottery} />  
                <Route path="/search" component={Search} />
                <Route path="/404" component={NotFound} />
                <Redirect to="/404" />           
              </Switch>
            </Suspense>
         }
        <GoTop/>
      </>
    )
  }
}

export default connect(
  state => ({ pageError: state.pageError })
)(App)